<template>
	<view class="container d-flex flex-column">
		<view class="flex-fill form">
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">昵称</view>
					<view class="input flex-fill">
						<input type="text" placeholder="请填写昵称" placeholder-class="text-color-assist font-size-base" 
						v-model="member.nickName">
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">手机</view>
					<view class="input flex-fill">
						<input type="text" v-model="member.mobilePhone" placeholder="请获取电话号" placeholder-class="text-color-assist font-size-base">
					</view>
					<button type="primary" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="!member.mobilePhone" class="get-phone">获取</button> 
				</view>
			</list-cell>
			<list-cell :hover="false">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">性别</view>
					<view class="input flex-fill">
						<view class="radio-group">
							<view class="radio" :class="{'checked': member.gender == '0'}" style="margin-right: 10rpx;" @tap="member.gender=0">先生</view>
							<view class="radio" :class="{'checked': member.gender == '1'}" @tap="member.gender=1">女士</view>
						</view>
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false" :arrow="!member.birthday">
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">生日</view>
					<view class="input flex-fill">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" v-if="!member.birthday" @change="handleDateChange">
							生日当天有惊喜
						</picker>
						<input type="text" v-else :value="member.birthday" disabled>
					</view>
				</view>
			</list-cell>
			<list-cell :hover="false" last>
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">支付密码</view>
					<view class="input flex-fill">
						<input type="password" maxlength="6" v-model="member.pay_pass" v-if="member.is_pass" disabled>
						<input type="number" maxlength="6" v-model="member.pay_pass" v-else>
					</view>
					<button type="primary" size="mini"  @click="cpass" v-if="member.is_pass" class="get-phone">修改</button> 
				</view>
			</list-cell>
			<list-cell :hover="false" last>
				<view class="form-input w-100 d-flex align-items-center">
					<view class="label">邀请人</view>
					<view class="input flex-fill">
						<input type="number" v-if="member.is_invite" disabled>
						<input type="number" v-model="member.invite" v-else>
					</view>
				</view>
			</list-cell>
		</view>
		<view class="btn-box d-flex align-items-center just-content-center">
			<button type="primary" class="save-btn" @tap="save">保存</button>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import listCell from '@/components/list-cell/list-cell'

	export default {
		components: {
			listCell
		},
		data() {
			const currentDate = this.getDate({format: true})
			return {
				member: {},
				date: currentDate
			}
		},
		computed: {
		   startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.member = this.$store.state.member
		},
		onShow() {
			if (!this.member.mobilePhone) {
				uni.showToast({
					icon:'none',
					title:'请获取手机号'
				})
			}
		},
		methods: {
			...mapMutations(['SET_MEMBER']),
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			handleDateChange(e) {
				this.member.birthday = e.target.value
			},
			save() {
				//提交信息
				this.$http.post('/user/update', this.member).then(res => {
					let result = res.data.data 
					// console.log(res)
					if(res.data.code != 1){
						return uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}else{
						// 是否支付
						if(res.data.ext == 1){
							// 支付
							uni.hideLoading()
							uni.requestPayment({
								provider: result.provider,
								timeStamp: result.timeStamp,
								nonceStr: result.nonceStr,
								package: result.package,
								signType:  result.signType,
								paySign:  result.paySign,
								success: () => {
									this.$http.post('/user', '').then(res => {
										console.log(res,res.data.code)
										if(res.data.code != 401){
											// console.log('支付成功')
											this.SET_MEMBER(res.data.data)
											// console.log('返回上一级')
											uni.showToast({
												title:'保存成功',
												icon:'none'
											})
											uni.navigateBack({})
										}
									}).catch(err => {
									
									})
								},
								fail: function (err) {
									// uni.switchTab({
									// 	url:'/pages/mine/mine'
									// })
									// console.log('fail:' + JSON.stringify(err));
								},complete(res) {
									// console.log('complete:' + JSON.stringify(res));
								}
							});
						}else{
							uni.showToast({
								title:'保存成功',
								icon:'none'
							})
							uni.navigateBack()
						}
						
					}

				}).catch(err => {
				
				})
				
				// const member = Object.assign(this.$store.state.member, this.member)
				// this.$store.commit('SET_MEMBER', member)	
			},
			getPhoneNumber(e) {
				var that = this
				let mobile = uni.getStorageSync('getPhoneNumber')
				if(mobile){
					that.member.mobilePhone = mobile
				}
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					let code = e.detail.code
					let iv = e.detail.iv
					let encryptedData = e.detail.encryptedData
					that.$http.post('/wx/getPhoneNumber', {code:code,iv:iv,encryptedData:encryptedData}).then(res => {
						// console.log(res.data.data.phoneNumber)
						that.member.mobilePhone = res.data.data
						uni.setStorageSync('getPhoneNumber',that.member.mobilePhone)
					}).catch(err => {
					
					})
				}else{
					that.member.mobilePhone = ''
				}
			},
			cpass(){
				this.member.is_pass = ''
				this.member.pay_pass = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	height: 100%;
}

.container {
	padding: 20rpx 30rpx;
}

.form {
	border-radius: 8rpx;
	.get-phone{
		float: right;
	}
}

.form-input {
	.label {
		width: 160rpx;
		font-size: $font-size-base;
		color: $text-color-base;
	}
	
	.input {
	}
	
	.radio-group {
		display: flex;
		justify-content: flex-start;
		
		.radio {
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
			border: 2rpx solid $text-color-assist;
			color: $text-color-assist;
			font-size: $font-size-base;
			
			&.checked {
				background-color: $color-primary;
				color: $text-color-white;
				border: 2rpx solid $color-primary;
			}
		}
	}
}

.btn-box {
	height: calc((100vh - 40rpx) / 2);
}

.save-btn {
	width: 90%;
	border-radius: 50rem !important;
	font-size: $font-size-lg;
}
</style>
